<template>
  <div id="risk" class="riskEvent">
    <div class="header">
      <span class="bigleft">风险事项</span>
    </div>
    <div class="leftright">
      <div class="echarts" style="grid-template-columns: calc((100% - 40px) / 2) calc((100% - 40px) / 4) calc((100% - 40px) / 4)">
        <div style="border: 1px solid #eee;overflow: hidden;">
          <div style="width:100%;height:90px;">
            <div style="width:50%;height:90px;float:left;">
              <p style="margin-left:16px;margin-top:6px"><span style="font-size:36px;color:#1f92ef">{{risk_sum['sum']}}</span></p>
              <P style="margin-left:16px;margin-top:-4px"><span style="font-size:12px;color:#5c6781;font-weight: bold">风险事项总数</span></P>
            </div>
            <div style="width:50%;height:90px;float:right;">
              <div style="padding-top: 30px;padding-right:20px;float:right">
                <div class="lls-chart-hint-item">
                  <span class="lls-chart-hint-icon-total"></span>
                  <span class="lls-chart-hint-text">风险事项总数</span>
                </div>
                <div class="lls-chart-hint-item">
                  <span class="lls-chart-hint-icon-validated"></span>
                  <span class="lls-chart-hint-text">已提交预警数</span>
                </div>
              </div>
            </div>
          </div>
          <div id="bigpolang" style="height:59px;">
          </div>
        </div>
        <div id="typemap" style="border: 1px solid #eee">
        </div>
        <div id="typemapone" style="border: 1px solid #eee">
        </div>
      </div>

      <div class="risktable">
        <div style="border-bottom:1px solid #eee">
          <span class="bigleft">风险事项列表</span>
        </div>

        <div class="leftright">
          <div style="margin-top:10px">
            <at-button @click="addrisk" type="primary"><i class="saas-icon-ten" style="position: absolute; margin-top: 4px; margin-left: -21px; font-size: 20px;"></i><span style="margin-right: -15px;">新增</span></at-button>
            <!-- <at-button  type="primary"><i class="saas-icon-remind"></i>预警</at-button> -->
            <div style="float:right;margin-right: 20px">
              <at-search v-model="search" placeholder="请输入事项名称" type="text" project='mh' icon="search" @keyup.enter.native="handleIconClick" :on-icon-click="handleIconClick"/>
            </div>
            <at-dialog title="新增风险事项"  :visible.sync="dialogVisibleTwo" size="small">
              <at-form ref="form" label-width='110px' :model="form" :rules="rules">
                <at-form-item label="风险事项名称" prop="riskname" project="mh">
                  <at-input v-model="form.riskname"></at-input>
                </at-form-item>
                <at-form-item label="风险事项类型" prop = "risktype" project="mh">
                  <at-select  v-model = "form.risktype" plceholder="标志为">
                    <at-option
                      v-for="item in risktype"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </at-option>
                  </at-select>
                </at-form-item>
                <at-form-item label="风险事项等级" prop="risklevel" project="mh">
                  <at-select  v-model = "form.risklevel" plceholder="标志为">
                    <at-option
                      v-for="item in risklevel"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </at-option>
                  </at-select>
                </at-form-item>
                <at-form-item label="风险事项描述" project="mh">
                  <at-input v-model="form.riskdescribe" placeholder="请输入风险事项描述" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"/>
                </at-form-item>
                <at-form-item label="解决方案" project="mh">
                  <at-input v-model="form.risksolution" placeholder="请输入解决方案" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"/>
                </at-form-item>
                <at-form-item label="备注">
                  <at-input v-model="form.remark" placeholder="请填写备注" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"/>
                </at-form-item>
                <at-form-item>
                </at-form-item>
              </at-form>
              <div style="text-align: center;margin-top: -26px;height: 50px;line-height: 50px;">
                <at-button type="primary" @click="submitForm('form')">确定</at-button>
                <at-button @click="resetForm('form')">取消</at-button>
              </div>
            </at-dialog>
          </div>
          <at-table :data="tableData.tableData" 
            @selection-change="selectionChange" 
            @filter-change="filtersChange"
            @cell-click="RowClick" 
            @sort-change = "sortChange">
          <!-- <at-table-column type="selection">
          </at-table-column> -->
          <at-table-column prop="arisk_event_name" label="事项名称" min-width="215px" :show-overflow-tooltip="true">
          </at-table-column>
          <at-table-column prop="arisk_event_type" column-key="arisk_event_type" min-width="100px" label="事项类型" :filters="[
              { text: '新兴', value: '新兴'},
              { text: '高危', value: '高危'},
              { text: '流行', value: '流行'},
              { text: '攻击类', value: '攻击类'}
            ]" filter-placement="bottom-start">
          </at-table-column>
          <at-table-column prop="arisk_event_level"  column-key="arisk_event_level"  min-width="90px" label="事项等级" :filters="[
              { text: '一般', value: 1 },
              { text: '较大', value: 2 },
              { text: '重大', value: 3 },
              { text: '特大', value: 4 }
            ]" filter-placement="bottom-start">
            <template slot-scope="scope">
              <span v-if="scope.row.arisk_event_level == 1">一般</span>
              <span v-if="scope.row.arisk_event_level == 2">较大</span>
              <span v-if="scope.row.arisk_event_level == 3">重大</span>
              <span v-if="scope.row.arisk_event_level == 4">特大</span>
            </template>
          </at-table-column>
          <at-table-column  prop="ainfluence"   label="影响范围" min-width="120px">
            <template slot-scope="scope">
              <span>
                {{scope.row.ainfluence}}
              </span>
              <!-- <at-tooltip :content="'有新的'+scope.row.add_sum +'条告警信息，可选择归入'" :placement="'bottom'" 
              :style="scope.row.aexist_update == 1 ?'visibility:visible':'visibility:hidden'">
                <span>
                  <i class="saas-icon-cir-remind" style="font-size:20px; position:absolute;margin-top:1px" @click.stop="guiru(scope.row)"></i>
                </span>
              </at-tooltip> -->
              <at-popover
                placement="top"
                trigger="hover"
                :content="`有新的${scope.row.add_sum}条告警信息，可选择归入`"
                v-if="scope.row.aexist_update == 1">
                <i class="saas-icon-cir-remind" style="font-size:20px; position:absolute;margin-top:1px" slot="reference" @click.stop="guiru(scope.row)"></i>
              </at-popover>
            </template>
          </at-table-column>
          <at-table-column prop="ar_time" label="创建时间" min-width="100px" sortable="custom">
          </at-table-column>
          <at-table-column prop="ar_person" label="创建人" min-width="50px">
          </at-table-column>
          <at-table-column prop="ais_commit" label="提交状态" column-key="ais_commit" min-width="100px" :filters="[
              { text: '未提交', value: 0 },
              { text: '已提交', value: 1 }
            ]"  filter-placement="bottom-start">
             <template slot-scope="scope">
              <span v-if="scope.row.ais_commit == 1">已提交</span>
              <span v-if="scope.row.ais_commit == 0">未提交</span>
            </template>
          </at-table-column>
          <!-- <at-table-column prop="submitter" label="操作" width="230">
            <template slot-scope="scope"> -->
              <!-- <span @click.stop="xiugai(scope.row)" class="button" :style="((scope.row.aanalysis_id != null) || (scope.row.ais_commit == 1)) ?'color:#8E949B; background-color: #EFEDEE;':'color:#EBF5FD; background-color: #1F92EF;'">修改</span> -->
              <!-- <span @click.stop="shanchu(scope.row)" class="button" :style="((scope.row.aanalysis_id != null) || (scope.row.ais_commit == 1)) ?'color:#8E949B; background-color: #EFEDEE;':'color:#EBF5FD; background-color: #1F92EF;'">删除</span> -->
              <!-- <span @click.stop="guiru(scope.row)" class="button" :style="scope.row.aexist_update == 0 ?'color:#8E949B; background-color: #EFEDEE;':'color:#EBF5FD; background-color: #1F92EF;'">归入</span> -->
              <!-- <span @click.stop="tijiao(scope.row)" class="button" :style="scope.row.ais_commit == 1 ?'color:#8E949B; background-color: #EFEDEE;':'color:#EBF5FD; background-color: #1F92EF;'">提交</span> -->
            <!-- </template> -->
          <!-- </at-table-column> -->
          </at-table>
          <div style="text-align:center; padding-top: 20px;padding-bottom:20px">
            <Pagination 
              :currentPage="riskEventsSubmit.pagination.current"  
              :total="tableData.total"
              :pageSizes="[20, 40, 80, 100]" 
              :pageSize="riskEventsSubmit.pagination.pageSize" 
              layout='total, sizes, prev, pager, next, jumper'
              @size-change="handleSizeChange" 
              @current-change="handleCurrentChange">
            </Pagination>
          </div>
        </div>
        <at-dialog title="可选择归入信息表" :visible.sync="dialogVisibleThree" size="large">
          <div>
            <at-table :data="tableDataone" 
                @selection-change="selectionChangeone" 
                @filter-change="filtersChangeone"
                @sort-change = "sortChangeone">
              <!-- <at-table-column prop="time" label="产生时间"  :show-overflow-tooltip="true">
              </at-table-column>
              <at-table-column prop="sys_name" label="节点名称"  :show-overflow-tooltip="true">
              </at-table-column>
              <at-table-column prop="log_level" label="日志级别"  :show-overflow-tooltip="true">
              </at-table-column>
              <at-table-column prop="tag" label="日志标签"  :show-overflow-tooltip="true">
              </at-table-column> -->
              <at-table-column label="发生时间"
                              :show-overflow-tooltip="true"
                               prop="ts"
                               width='120px'>
              </at-table-column>
              <at-table-column label="系统名称"
                              :show-overflow-tooltip="true"
                               prop="sys_name"
                               width='130px'>
              </at-table-column>
              <at-table-column label="严重级别"
                              :show-overflow-tooltip="true"
                               prop="log_level"
                               width='100px'>
                <template v-slot="scope">
                  <span v-if="scope.row.log_level" :class="['level-tag',scope.row.log_level === 0?'level-tag-normal':scope.row.log_level === 1?'level-tag-low-risk':scope.row.log_level === 2?'level-tag-middle-risk':scope.row.log_level === 3?'level-tag-high-risk':'level-tag-serious']">
                    {{scope.row.log_level === undefined ? ' ': `${translateChineseLevel(scope.row.log_level)}`}}
                  </span>
                  <span class="level" v-else>--</span>  
                </template>
              </at-table-column>
              <at-table-column label="描述"
                              :show-overflow-tooltip="true"
                               prop="describes">
              </at-table-column>
              <at-table-column label="日志类型"
                              :show-overflow-tooltip="true"
                               prop="log_type_cn"
                               width='120px'>
              </at-table-column>
              <at-table-column label="来源"
                              :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{translateChinese('source', scope.row.log_type)}}</span>
                </template>
              </at-table-column>
              <at-table-column prop="submitter" label="操作" width="80">
                <template slot-scope="scope">
                  <span @click.stop="guiruone(scope.row)">归入</span>
                </template>
              </at-table-column>
            </at-table>
          </div>
          <div slot="footer" class="dialog-footer">
            <at-button @click="dialogVisibleThree = false">关 闭</at-button>
          </div>
        </at-dialog>
        <!-- 提交弹出框 -->

        <at-dialog title="提交风险事项"  :visible.sync="tijiaodialogVisible" size="small">
          <p>
            <at-tooltip :content= "this.tijiaodata.name" :placement="'top'">
                <span style="width:100%; display: inline-block;overflow: hidden;height:30px; color:#5c6781;white-space: nowrap;text-overflow: ellipsis;">风险事项名称：{{this.tijiaodata.name}}</span>
            </at-tooltip>
          </p>
          <p><span>是否对此风险事项进行提交,提交后可前往“风险预警”模块进行预警</span></p>
          <div slot="footer" class="dialog-footer">
            <at-button type="primary" @click="submittijiao">确 定</at-button>
            <at-button  @click="tijiaodialogVisible = false">取 消</at-button>
          </div>
        </at-dialog>

        <!-- 修改弹出框 -->
        <at-dialog title="修改风险事项"  :visible.sync="dialogVisible" size="large">
          <at-form ref="update" label-width='110px' :model="update" :rules="rules">
            <at-form-item label="风险事项名称" prop="ariskname" >
              <at-input v-model="update.ariskname"></at-input>
            </at-form-item>
            <at-form-item label="风险事项类型" prop = "risktype" >
              <at-select  v-model = "update.risktype" plceholder="标志为">
                <at-option
                  v-for="item in risktype"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </at-option>
              </at-select>
            </at-form-item>
            <at-form-item label="风险事项等级" prop="risklevel" >
              <at-select  v-model = "update.risklevel" plceholder="标志为">
                <at-option
                  v-for="item in risklevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </at-option>
              </at-select>
            </at-form-item>
            <at-form-item label="风险事项描述" prop="riskdescribe" >
              <at-input v-model="update.riskdescribe" placeholder="请输入风险事项描述" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"/>
            </at-form-item>
            <at-form-item label="解决方案" prop="risksolution" >
              <at-input v-model="update.risksolution" placeholder="请输入解决方案" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"/>
            </at-form-item>
            <at-form-item label="备注">
              <at-input v-model="update.remark" placeholder="请填写备注" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"/>
            </at-form-item>
            <at-form-item>
            </at-form-item>
          </at-form>
          <div style="text-align: center;margin-top: -26px;height: 50px;line-height: 50px;">
            <at-button type="primary" @click="submitupdate('update')">立即修改</at-button>
            <at-button @click="resetupdate('update')">取消</at-button>
          </div>
        </at-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { mixin } from '../../../models/safeEvents/utils/util'

export default {
  name: 'riskevent',
  mixins: [mixin],
  data () {
    var namerepetition = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入风险事项名称'))
      } else if (value.length > 128) {
        callback(new Error('风险事项名称过长'))
      } else {
        let DataValidation = function (value) {
          if (value === 'success') {
            callback()
          } else {
            callback(new Error('风险事项名称重复'))
          }
        }
        this.$store.dispatch('riskEvents/riskverify', { 'value': value, 'DataValidation': DataValidation })
      }
    }
    var name = (rule, value, callback) => {
      if (value !== this.riskname) {
        if (value === '') {
          callback(new Error('请输入风险事项名称'))
        } else {
          let DataValidation = function (value) {
            if (value === 'success') {
              callback()
            } else {
              callback(new Error('风险事项名称重复'))
            }
          }
          this.$store.dispatch('riskEvents/riskverify', { 'value': value, 'DataValidation': DataValidation })
        }
      } else if (value === this.riskname) {
        callback()
      }
    }
    return {
      dialogVisibleTwo: false,
      dialogVisibleThree: false,
      dialogVisible: false,
      tijiaodialogVisible: false,
      form: {
        riskname: '',
        risktype: '',
        risklevel: '',
        risksolution: '',
        riskdescribe: '',
        remark: ''
      },
      update: {
        riskid: '',
        ariskname: '',
        risktype: '',
        risklevel: '',
        risksolution: '',
        riskdescribe: '',
        remark: ''
      },
      tijiaodata: {
        name: '',
        id: ''
      },
      riskname: '',
      search: '',
      risktype: [{ value: '新兴', label: '新兴' }, {value: '流行', label: '流行'}, {value: '高危', label: '高危'}, {value: '攻击类', label: '攻击类'}],
      risklevel: [{value: 1, label: '一般'}, {value: 2, label: '较大'}, {value: 3, label: '重大'}, {value: 4, label: '特大'}],
      rules: {
        riskname: {validator: namerepetition, trigger: 'blur', required: true},
        ariskname: {validator: name, trigger: 'blur', required: true},
        risktype: {trigger: 'blur', required: true, message: '请选择风险事项类型'},
        risklevel: {required: true, message: '请选择风险事项等级'},
        riskdescribe: {trigger: 'blur', required: true, message: '请输入风险事项描述'},
        risksolution: {trigger: 'blur', required: true, message: '请输入解决方案'},
        remark: {trigger: 'blur', required: true, message: '请输入备注'}
      }
    }
  },
  computed: {
    ...mapState({
      tableData: state => state.riskevent.riskData,
      riskEventsSubmit: state => state.riskevent.riskEventsSubmit,
      changeSizeValue: state => state.system.changeSizeValue,
      risk_sum: state => state.riskevent.risk_sum,
      tableDataone: state => state.riskevent.tableDataone
    })
  },
  // created () {
  //   this.$store.dispatch('riskevents/riskData')
  // },
  mounted () {
    // 自动分析跳转路由
    if (this.$route.query.riskEeventid === undefined) {
      this.$store.dispatch('riskevents/riskData/riskidzeo')
    } else {
      this.$store.dispatch('riskEvents/filters/riskentid', {
        'riskEeventid': this.$route.query.riskEeventid
      })
    }
  },
  destroyed () {
    this.$store.commit('riskevents/clear')
  },
  watch: {
    $route (to, from) {
      if (to.name === '@风险事项') {
        if (this.$route.query.riskEeventid === undefined) {
          this.$store.dispatch('riskevents/riskData/riskidzeo')
        } else {
          this.$store.dispatch('riskEvents/filters/riskentid', {
            'riskEeventid': this.$route.query.riskEeventid
          })
        }
      }
    },
    changeSizeValue () {
      if (document.getElementById('bigpolang')) {
        this.$echarts.init(document.getElementById('bigpolang')).resize()
      }
      if (document.getElementById('typemap')) {
        this.$echarts.init(document.getElementById('typemap')).resize()
      }
      if (document.getElementById('typemapone')) {
        this.$echarts.init(document.getElementById('typemapone')).resize()
      }
    }
  },
  methods: {
    // 新增接口
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.form))
          this.$store.dispatch('riskEvents/riskData/add', {'data': data})
          this.dialogVisibleTwo = false
          this.$store.dispatch('riskevents/riskData')
          this.$refs[formName].resetFields()
        } else {
          return false
        }
      })
    },
    submitupdate (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.update.risklevel === '一般') {
            this.update.risklevel = '1'
          } else if (this.update.risklevel === '较大') {
            this.update.risklevel = '2'
          } else if (this.update.risklevel === '重大') {
            this.update.risklevel = '3'
          } else if (this.update.risklevel === '特大') {
            this.update.risklevel = '4'
          }
          let data = JSON.parse(JSON.stringify(this.update))
          this.$store.dispatch('riskEvents/riskData/update', {'data': data})
          this.$store.dispatch('riskevents/riskData')
          this.dialogVisible = false
          this.$refs[formName].resetFields()
        } else {
          return false
        }
      })
    },
    // 新增取消函数
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.dialogVisibleTwo = false
    },
    // 新增取消函数
    resetupdate (formName) {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
    },
    // 搜索事件
    handleIconClick () {
      this.$store.dispatch('riskEvents/changeSearchValue', {
        'search': this.search,
        'type': 'search'
      })
    },
    addrisk () {
      if (this.dialogVisibleTwo) {
        this.dialogVisibleTwo = false
      } else {
        this.form.riskname = ''
        this.form.risktype = ''
        this.form.risksolution = ''
        this.form.risklevel = ''
        this.form.riskdescribe = ''
        this.form.remark = ''
        this.dialogVisibleTwo = true
      }
      this.$store.dispatch('riskEvents/changeSearchValue', {
        'search': this.search,
        'type': 'search'
      })
    },
    // 选择框选中值传入数组
    selectionChange (val) {
      this.id_store = []
      for (let i = 0; i < val.length; i++) {
        let websiteId = val[i]
        this.id_store.push(websiteId)
      }
    },
    // 归入选择
    selectionChangeone (val) {
      this.id_store = []
      for (let i = 0; i < val.length; i++) {
        let websiteId = val[i]
        this.id_store.push(websiteId)
      }
    },
    filtersChange (filters) {
      this.$store.dispatch('riskEvents/filters', filters)
    },
    filtersChangeone (filters) {
      this.$store.dispatch('riskEvents/filters', filters)
    },
    // 点击跳转列表跳转相应页面事件，判断如果是否前面的选择框
    RowClick (row, event) {
      if (event.type !== 'selection') {
        // this.$router.push({
        //   path: `riskEvents/riskDetails${row['arisk_event_id']}/${row['aanalysis_id']}`
        // })
        this.$router.push({ 'name': '风险事项详情',
          'query': {
            eventid: row['arisk_event_id'],
            analysisid: row['aanalysis_id'],
            type: 'riskevent'
          }
        })
      }
    },
    // 排序
    sortChange ({ column, prop, order }) {
      if (order !== null) {
      } else {
        prop = 'asubmit_time'
        order = 'ascending'
      }
      this.$store.dispatch('riskEvents/sotr', {
        key: prop,
        value: order.slice(0, -3)
      })
    },
    // 排序
    sortChangeone ({ column, prop, order }) {
      if (order !== null) {
      } else {
        prop = 'asubmit_time'
        order = 'ascending'
      }
      this.$store.dispatch('riskEvents/sotr', {
        key: prop,
        value: order.slice(0, -3)
      })
    },
    // 给后台每页显示多少值
    handleSizeChange (size) {
      this.$store.dispatch('riskEvents/paginationChange', {
        'size': size
      })
    },
    // 给后台显示的页数
    handleCurrentChange (current) {
      this.$store.dispatch('riskEvents/paginationChange', {
        'current': current
      })
    },
    shanchu (row) {
      if ((row.aanalysis_id == null) && (row.ais_commit === '0')) {
        this.$store.dispatch('riskEvents/delect', {
          'arisk_event_id': row['arisk_event_id']
        })
      } else {
        // console.log('不能删除')
      }
    },
    guiru (row) {
      if (row.aexist_update === '1') {
        if (this.dialogVisibleThree) {
          this.dialogVisibleThree = false
        } else {
          this.dialogVisibleThree = true
        }
        this.$store.dispatch('riskEvents/guiru', {
          'arisk_event_id': row['arisk_event_id']
        })
      }
    },
    submittijiao () {
      this.$store.dispatch('riskEvents/tijiao', {
        'arisk_event_id': this.tijiaodata.id
      })
      this.tijiaodialogVisible = false
    },
    tijiao (row) {
      this.tijiaodata.name = row['arisk_event_name']
      this.tijiaodata.id = row['arisk_event_id']
      if (row.ais_commit === '0') {
        if (this.tijiaodialogVisible) {
          this.tijiaodialogVisible = false
        } else {
          this.tijiaodialogVisible = true
        }
        // this.$store.dispatch('riskEvents/tijiao', {
        //   'arisk_event_id': row['arisk_event_id']
        // })
      }
    },
    guiruone (row) {
      // this.$store.dispatch('riskEvents/guiruone', {
      //   'log_id': row['log_id']
      // })
      this.$store.dispatch('riskEvents/guiruone', {data: {'log_id': row['log_id']}, arisk_event_id: row['risk_event_id']})
    },
    xiugai (row) {
      if ((row.aanalysis_id == null) && (row.ais_commit === '0')) {
        if (this.dialogVisible) {
          this.dialogVisible = false
        } else {
          this.dialogVisible = true
        }
        this.riskname = row['arisk_event_name']
        this.update.riskid = row['arisk_event_id']
        this.update.ariskname = row['arisk_event_name']
        this.update.risktype = row['arisk_event_type']
        if (row['arisk_event_level'] === '1') {
          this.update.risklevel = '一般'
        } else if (row['arisk_event_level'] === '2') {
          this.update.risklevel = '较大'
        } else if (row['arisk_event_level'] === '3') {
          this.update.risklevel = '重大'
        } else {
          this.update.risklevel = '特大'
        }
        this.update.risksolution = row['asolution']
        this.update.riskdescribe = row['arisk_event_content']
        this.update.remark = row['aremark']
      } else {

      }
    },
    translateChineseLevel (level) {
      switch (level) {
        case 1:
          return '低危'
        case 2:
          return '中危'
        case 3:
          return '高危'
        case 4:
          return '严重'
      }
    }
  }
}
</script>
<style lang="less">
.riskEvent{
  .at-form-item__error{
    float: left;
  }
  .at-input .at-textarea__inner{
    margin-bottom: 0;
  }
  .at-dialog-box{
    .at-dialog--small{
      width: 600px;
    }
    .at-form-item{
      margin-right: 0;
    }
    .at-form-item__content{
      margin-right: 0;
    }
  }
}
#risk{
  background-color: #fff;
  padding-bottom: 20px;
  p{
    margin: 0px;
    padding: 0px
  }
  .lls-chart-hint-item{
    width: 100%;
    height: 12px;
    line-height: 12px;
    margin-bottom: 6px;
  }
  .lls-chart-hint-icon-total{
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #1f92ef;
    background-color: #e8f4fd;
    border-radius: 50%;
  }
  .lls-chart-hint-text{
    display: inline-block;
  }
  .lls-chart-hint-icon-validated{
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #1f92ef;
    background-color: #1f92ef;
    border-radius: 50%;
  }
  .button{
    display: inline-block;
    width: 35px;
    text-align: center
  }
  .leftright{
    margin-left:20px;
    margin-right:20px;
  }
  .risktable{
    border: 1px solid #eee;
    margin-top: 20px;
  }
  .echarts{
    margin-top: 20px;
    height: 150px;
    display: grid;
    grid-template-rows: 150px;
    grid-gap: 20px;
  }
  // .echarts div{
  //   border: 1px solid #eee
  // }
  .header{
    height: 50px;
    border-bottom: 1px solid #eee;
  }
  .bigleft{
    line-height: 50px;
    display: inline-block;
    margin-left: 20px;
    font-size: 14px;
    color: #5c6781;
    font-weight: bold;
  }
}
</style>

